<div style="min-height:400px;">
    <style>
        table {
            width: 100%;
            max-width: 100%;
            border-spacing: 0;
            border-collapse: collapse;
            border: 1px solid #ddd;
            font-size: 14px;
        }

        tbody tr:hover {
            background-color: #f1f1f1;
        }

        tbody thead th {
            border: 1px solid #ddd
        }

        tbody tr td {
            text-align: center;
            padding: 8px;
            vertical-align: middle;
            border: 1px solid #ddd;
        }

        td {
            text-align: center;
        }

        .position_remove {
            color: red;
        }

        .position_update {
            color: #a0a;
        }
    </style>
    <table style="width:100%;">
        <tr>
            <th>广告位名称</th>
            <th>图片</th>
            <th>尺寸</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>广告位1</td>
            <td><img class="ad-img" src="https://img4.kcimg.cn/imgser/0/63/63670.jpg!270" alt=""></td>
            <td>234px*307px</td>
            <td>
                <a class="add-ad" href="javascript:void (0)" aid="1"><b>添加</b></a>
                <a href="javascript:void (0)" class="position_remove" aid="1"><b>删除</b></a>
            </td>
        </tr>
        <tr>
            <td>广告位2</td>
            <td><img class="ad-img" src="https://img4.kcimg.cn/imgser/0/63/63670.jpg!270" alt=""></td>
            <td>234px*307px</td>
            <td>
                <a class="add-ad" href="javascript:void (0)" aid="2"><b>添加</b></a>
                <a href="javascript:void (0)" class="position_remove" aid="2"><b>删除</b></a>
            </td>
        </tr>
        <tr>
            <td>广告位3</td>
            <td><img class="ad-img" src="https://img4.kcimg.cn/imgser/0/63/63670.jpg!270" alt=""></td>
            <td>234px*307px</td>
            <td>
                <a class="add-ad" href="javascript:void (0)" aid="3"><b>添加</b></a>
                <a href="javascript:void (0)" class="position_remove" aid="3"><b>删除</b></a>
            </td>
        </tr>
        <tr>
            <td>广告位4</td>
            <td><img class="ad-img" src="https://img4.kcimg.cn/imgser/0/63/63670.jpg!270" alt=""></td>
            <td>234px*307px</td>
            <td>
                <a class="add-ad" href="javascript:void (0)" aid="4"><b>添加</b></a>
                <a href="javascript:void (0)" class="position_remove" aid="4"><b>删除</b></a>
            </td>
        </tr>
    </table>
</div>

<script>
    (function () {
        $.ajax({
            type: 'GET',
            url: 'http://api.hongyanche.com/marketing_admin/ad_list',
            xhrFields:{
                withCredentials:true
            },
            success: function (data) {
                var datas = data.data.list;
                var imgEl = document.getElementsByClassName('ad-img');
                for (let i =0; i<imgEl.length; i++) {
                    $(imgEl[i]).attr('src', datas[i].imgurl)
                }
            }
        });
        /**
         * 上传图片到服务器
         * @param inputID 上传的输入框ID
         * @param uri 上传的地址
         * @return Promise
         * */
        const uploadImg = function (inputID, uri) {
            return new Promise((resolve, reject) => {
                $(inputID).on('change', function () {
                    let formDate = new FormData();
                    formDate.append('0', $(inputID)[0].files[0]);
                    $.ajax({
                        url: uri,
                        type: 'POST',
                        cache: false,
                        data: formDate,
                        processData: false,
                        contentType: false,
                        xhrFields:{
                            withCredentials:true
                        },
                        success: function (data) {
                            resolve(data)
                        },
                        error: function (err) {
                            reject(err)
                        }
                    })
                })
            })
        };
        function openNew() {
            //获取页面的高度和宽度
            var sWidth = document.body.scrollWidth;
            var sHeight = document.body.scrollHeight;
            //获取页面的可视区域高度和宽度
            var wHeight = document.documentElement.clientHeight;
            var oMask = document.createElement("div");
            oMask.id = "mask";
            oMask.style.height = sHeight + "px";
            oMask.style.width = sWidth + "px";
            document.body.appendChild(oMask);
            var oLogin = document.createElement("div");
            oLogin.id = "login";
            oLogin.innerHTML = "<div class='loginCon'><div id='close' style='position: absolute; right: 0; top: 0;'><i class='weui-icon weui-icon-cancel weui-icon-original' style='font-size: 25px;'></i></div></div>";
            document.body.appendChild(oLogin);
            //获取登陆框的宽和高
            var dHeight = oLogin.offsetHeight;
            var dWidth = oLogin.offsetWidth;
            //设置登陆框的left和top
            oLogin.style.left = sWidth / 2 - dWidth / 2 + "px";
            oLogin.style.top = wHeight / 2 - dHeight / 2 + "px";
            //点击关闭按钮
            var oClose = document.getElementById("close");
            //点击登陆框以外的区域也可以关闭登陆框
            oClose.onclick = oMask.onclick = function () {
                document.body.removeChild(oLogin);
                document.body.removeChild(oMask);
            };
        }

        $('.add-ad').on('click', function () {
            var aID = $(this).attr('aid');
            openNew();
            $('#login').append(`
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">跳转地址</label></div>
                        <div class="weui-cell__bd">
                            <input id="address" class="weui-input" type="url" placeholder="http://">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class='weui-cell__hd'>
                            <label class='weui-label'>上传广告图</label>
                        </div>
                        <img id="showImg" class="weui-uploader__file vehicle-create" src="" alt="" name="driving_card" type="img">
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <a id="add-ad-btn" href="javascript:;" class="weui-btn weui-btn_primary " style="background-color: #1aad19;">提交</a>
                    </div>
            `);
            uploadImg('#uploaderInput', 'http://api.hongyanche.com/upload/ad').then((data) => {
                var imgUrl = data.data.url;
                $('#showImg').attr('src', imgUrl);
            }).catch((err) => alert(err));

            // 增加广告
            $('#add-ad-btn').on('click', function () {
                var adds = $('#address').val();
                var img = $('#showImg').attr('src');
                $.ajax({
                    url: 'http://api.hongyanche.com/marketing_admin/ad_add',
                    type: 'POST',
                    xhrFields:{
                        withCredentials:true
                    },
                    data: {
                        imgurl: img,
                        place: aID,
                        home_url: adds
                    },
                    success: function (data) {
                        alert(data.errormsg);
                        document.body.removeChild(oLogin);
                        document.body.removeChild(oMask);
                    }
                })
            });
        });

        $('.position_remove').on('click', function () {
            var isDelete = confirm('是否确认删除该广告?');
            var aID = $(this).attr('aid');
            if (isDelete) {
                $.ajax({
                    url: 'http://api.hongyanche.com/marketing_admin/ad_remove',
                    type:'POST',
                    xhrFields:{
                        withCredentials:true
                    },
                    data: {
                        ad_id: aID
                    },
                    success: function (data) {
                        alert(data.errormsg)
                    }
                })
            }
        })
    })(window, undefined);
</script>
